<template>
  <div class="card-box">
    <v-dialog :show.sync="dialogVisible" width="50%" title="导出数据" @beforeClose="beforeClose">
      <div style="overflow: auto;height: 600px">
        <div class="card-title">根据条件导出</div>
        <div style="margin: 10px 0px;width: 500px">
          <el-form label-width="150px">
            <el-form-item label="年度（可多选）:">
              <el-select v-model="years" multiple placeholder="请选择年度" :clearable="true">
                <el-option v-for="item in year" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考核结果（可多选）:">
              <el-select v-model="assessResult" multiple placeholder="请选择考核结果" :clearable="true">
                <el-option v-for="item in assess_industrial_result" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="card-title">请选择导出的字段名称</div>
        <div>
          <el-input type="input" placeholder="搜索字段名称" v-model="searchVal" style="width: 300px;margin: 10px 15px;"></el-input>
          <el-button size="medium" type="primary" @click="initialization" style="float: right;margin-top: 10px;">重置</el-button>
        </div>
        <div>
          <el-table
            :data="tableData"
            ref="exportTable"
            @selection-change="selectFields"
            size="small"
            :header-cell-style="{'text-align':'center' }"
            :row-style="{height:'35px'}"
            :cell-style="{'text-align':'center', 'height':'22px'}"
          >
            <el-table-column type="selection" width="50" value="val" />
            <el-table-column label="序号" type="index" width="100" align="center" />
            <el-table-column label="字段名称" prop="field" />
          </el-table>
        </div>
      </div>
      <div slot="foot">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="commit">导 出</el-button>
      </div>
    </v-dialog>
  </div>
</template>
<script>
import { downloadPost } from "@/admin/api/common"
import { downloadBlob } from "@/utils"
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: "client-export",
  data () {
    return {
      tableData: [],
      dialogVisible: false,
      fields: [],
      years: '',
      assessResult: '',
      saveFields: [],
      searchForm: {
        assessIndustrialFields: '',
        year: '',
        assessResult: '',
      },
      form: {},
      linkPerson: '',
      clientType: '',
      searchVal: '',
    }
  },
  // hxf-0731-计算属性中取出字典值
  computed: mapState({
    //年份
    year: state => {
      let data = state.dict.find(item => item.type === "year") || {};
      //let list = data.children || []
      return data.children || []
    },
    //考核结果
    assess_industrial_result: state => {
      let data = state.dict.find(item => item.type === "assess_industrial_result") || {};
      //let list = data.children || []
      return data.children || []
    },
  }),

  watch: {
    searchVal (newValue, oldValue) {
      newValue !== oldValue && this.filterList()
    }
  },
  methods: {
    //重置搜索
    initialization () {
      this.searchVal = '';
    },
    //过滤列表
    filterList () {
      let saveFields = this.fields;
      if (!this.searchVal) {
        this.show(this.clientType)
      } else {
        this.tableData = this.tableData.filter(item => {
          return item.field.indexOf(this.searchVal) > -1
        })
        let fields = saveFields.map(item => item.id)
        this.$nextTick(() => {
          this.tableData.forEach(row => {
            if (fields.indexOf(row.id) >= 0) {
              this.$refs.exportTable.toggleRowSelection(row, true);
            }
          })
        })
      }
      this.saveFields = saveFields
    },
    getList () {
      this.tableData = [
        { id: 0, field: "产业用房考核id", val: "assess_industrial_id" },
        { id: 20, field: "年度", val: "year" },
        { id: 1, field: "园区", val: "park_name" },
        { id: 2, field: "楼层", val: "floor" },
        { id: 3, field: "公司名称", val: "company_name" },
        { id: 22, field: "进驻情况", val: "enter_desc" },
        { id: 4, field: "承租面积（m²）", val: "lease_area" },
        { id: 5, field: "租金单价(元/月)", val: "rent_price" },
        { id: 6, field: "月租金(元/月)", val: "month_rent" },
        { id: 7, field: "租金优惠", val: "rent_concession" },
        { id: 8, field: "登记注册地", val: "registered_address" },
        { id: 9, field: "纳税地", val: "tax_place" },
        { id: 10, field: "纳税总额（万元）", val: "total_tax" },
        { id: 11, field: "创新成果投入（万元）", val: "innovative_results" },
        { id: 12, field: "GDP贡献（万元）", val: "gdp_contribute" },
        { id: 13, field: "是否上市企业", val: "is_list_company" },
        { id: 14, field: "租金缴纳情况", val: "rent_status" },
        { id: 15, field: "考核结果", val: "assess_result" },
        { id: 16, field: "合同开始时间", val: "contract_start_tm" },
        { id: 17, field: "合同结束时间", val: "contract_end_tm" },
        { id: 18, field: "租期（月）", val: "lease_term" },
        { id: 19, field: "统一社会信用代码", val: "company_code" },
        { id: 21, field: "备注", val: "remarks" },

      ]
    },
    show () {
      this.dialogVisible = true;
      this.getList();
    },
    selectFields (selectField) {
      this.fields = selectField
    },
    closeDialog () {
      this.dialogVisible = false
    },
    beforeClose (done) {
      this.dialogVisible = false;
    },
    commit () {
      this.searchForm.assessIndustrialFields = this.fields;
      this.searchForm.year = this.years;
      this.searchForm.assessResult = this.assessResult;
      if (this.fields.length === 0 || this.fields == null) {
        this.$message.error("请选择需要导出的字段")
      } else {
        const loading = this.$loading({
          lock: true,
          text: '数据处理中'
        });
        var time = new Date();
        let name = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + time.getHours() + time.getMinutes() + time.getSeconds() + '产业用房考核列表.xlsx';
        let url = '/api/assessindustrial/assessindustrial-download'
        downloadPost(url, this.searchForm).then(response => {
          downloadBlob(response.data, name)
          loading.close();
          this.dialogVisible = false;
        })
      }

    }


  }
}

</script>

<style scoped>
</style>
